<template>
  <div>
    <el-row>
      <el-col :span="4">
        <!-- 组件展示 -->
        <component :is="tagName" v-bind="props"></component>
      </el-col>
      <el-col :span="20">
        <!-- 组件属性编辑 -->
        <el-form v-model="tempvalue">          
          <el-form-item v-for="item in this.propconfig" :label="item.info" :key="item.propName">
            <el-input v-model="tempvalue[item.propName]"></el-input>
          </el-form-item>          
        </el-form>        
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
import axios from 'axios'
// import StaticText from '../components/staticText.vue';

export default {
  // components:{StaticText},
  async created(){
    console.log(this.$route);
    axios.get("http://localhost:8811/api/ShowTypeComponente/GetOne/4").then(x=>{      
      this.tagName=x.data.result.component
      this.propconfig=x.data.result.showTypeComponentPropties
      x.data.result.showTypeComponentPropties.forEach(element => {
        this.$set(this.tempvalue,element.propName,element.defaultValue)        
      });      
    })
  },
  watch:{
    tempvalue:{
      deep:true,
      handler:function(newval,oldval){
        for (var pname in newval){
          var arr=pname.split('.')
          var root=this.props
          for (var i=0;i<arr.length;i++){
            if(i==arr.length-1){
              //叶子节点
              this.$set(root,arr[i],newval[pname])
            }
            else{
              //中间节点
              if(root[arr[i]]==undefined){
                this.$set(root,arr[i],{})
              }
            }
            root=root[arr[i]]
          }
        }
      }
    }
  },
  data() {
    return {
      tempvalue:{},
      tagName:"",
      propconfig:[],
      props:{}
    }
  }
}
</script>